<template>
  <div v-for="(item, index) in checkList" :key="`color-${index}`" class="color-item">
    <span class="checkout" :style="{ backgroundColor: item.color }" @click="changeColorCheck(item)">
      <check-outlined v-if="actived == item.name"/>
    </span>
    <span class="check-name">{{ item.name }}</span>
  </div>
</template>

<script setup lang="ts">
import { CheckOutlined } from '@ant-design/icons-vue';
import { colorInter } from "@/interface/layout/index";
import { ref } from "vue";
defineProps({
  checkList: Array
});
// 展开关闭菜单栏
interface Emit {
  (ev: 'setColor', name: string): void,
  (ev: 'setColor', name: string, type: string): void,
}
const emit = defineEmits<Emit>();

const actived = ref<String>("钴蓝")

const changeColorCheck = (data: colorInter) => {
  if (data.name !== actived.value) {
    actived.value = data.name;
    emit("setColor", data.color, data.type);
  }
}

</script>

<style lang="scss" scoped>
.color-item {
  float: left;
  display: flex;
  width: 25%;
  height: 40px;
  align-items: center;
  line-height: 30px;
}
.checkout {
  display: inline-block;
  cursor: pointer;
  width: 23px;
  height: 23px;
  text-align: center;
  line-height: 23px;
  color: #fff;
  margin-right: 5px;
  border-radius: 5px;
}

.check-name {
  font-size: 14px;
  color: #333;
  margin-right: 15px;
}
</style>